<template>
	<view class="page">
		<view class="head">
			<view class="bg">
				<c-navBar title="充值" isPerch isTran isBack></c-navBar>
				<view class="bg_b"></view>
				<view class="userCard">
					<view class="user_l">
						<image class="header-img" v-if="userInfo.avatar" :src="vuex_imgUrl+userInfo.avatar" mode="" />
						<image class="header-img" v-else src="/static/common/header-img.png" mode=""></image>
						<view class="info">
							<view class="name">{{userInfo.nickname || '用户名'}}</view>
							<view class="mycard" @click="$fn.jumpPage('/pages/topUp/pages/myCard')">
								我的次卡
								<u-icon name="arrow-right" color="#FFFFFF" size="24rpx"></u-icon>
							</view>
						</view>
					</view>
					<view class="user_r" @click="$fn.jumpPage('/pages/topUp/pages/topUpDetails')">充值明细</view>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="main_t">
				<image class="card_icon" src="/static/tabbar/card_icon.png" mode=""></image>
				次卡充值
			</view>

			<view class="list">
				<view class="list_item" :class="{list_item_a:item.productId == productId}"
					v-for="(item,index) in cardList" :key="index" @click="selectCard(item.productId)">
					<view class="list_i_l">
						<view class="card_name">{{item.name}}</view>
						<!-- <view class="card_num">{{item.numberUses}}次</view> -->
						<view class="price">￥{{$fn.twoToFixed(item.price/100/item.numberUses)}}元/次</view>
					</view>

					<view class="list_i_r">
						<view>{{$fn.twoToFixed(item.price/100)}}元 </view>
						<view class="original" v-show="item.yprice">{{$fn.twoToFixed(item.yprice/100)}}元</view>
					</view>
				</view>
			</view>

			<view class="agreement" @click.stop="isAgree=!isAgree">
				<image v-if="isAgree" class="gou" src="/static/tabbar/gou.png" mode=""></image>
				<view v-else class="no_select"></view>
				我已阅读并同意<text class="a_name" @click.stop="">《InCheck 充值协议》</text>
			</view>
			<button class="top_up" @click="goApplePay">充值</button>
		</view>

		<c-check :show="show" :dataList='payTypeList' title="选择支付方式" @close="show=false"
			@determine="determine"></c-check>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				cardList: [],
				userInfo: {},
				addressShow: false,
				isAgree: false,
				show: false,
				payTypeList: [
					{
						id: '0',
						label: '苹果支付',
						icon: '/static/common/vx_friends.png'
					},
					{
						id: '1',
						label: '微信支付',
						icon: '/static/common/vx_friends.png'
					}, {
						id: '2',
						label: '支付宝支付',
						icon: '/static/tabbar/zfb_icon.png'
					}
				],
				// 支付准备
				iap: '',
				productId: '',
				iapOrder: false,
				wxpaySev: '', //微信支付
				alipaySev: '', //支付宝支付
			}
		},
		onShow() {
			this.getUserInfo();
			this.getCardList();
		},
		onLoad() {

		},
		methods: {
			getIapChannels() {
				let _this = this;
				plus.payment.getChannels(function(channels) {
					console.log('111111111', channels)
					for (let i in channels) {
						let channel = channels[i];
						// 获取 id 为 'appleiap' 的 channel  
						if (channel.id == 'appleiap') {
							_this.iap = channel;
							_this.requestIapOrder();
						}
						// 微信
						if (channel.id === 'wxpay') {
							_this.wxpaySev = channel;
						}
						// 支付宝
						if (channel.id === 'alipay') {
							_this.alipaySev = channel;
						}
					}
				}, function(e) {
					console.log("获取iap支付通道失败：" + e.message)
				});
			},
			requestIapOrder() {
				console.log('------requestIapOrder', this.productId);
				// #ifdef APP-PLUS
				console.log(this.productId)
				let ids = [this.productId];
				this.iap.requestOrder(ids, function(res) {
					console.log(res, '2222222222222222222222');
					this.iapOrder = true;
				}, function(e) {
					console.log('获取订单信息失败', e)
					// this.vm.jumpPay = false;

				});
				// #endif
			},
			goApplePay() {
				if (!this.vuex_token) {
					uni.$u.throttle(() => {
						uni.showToast({
							title: "未登录，请登录后充值",
							icon: "none",
							duration: 2000,
						});
						setTimeout(function() {
							uni.reLaunch({
								url: "/pages/tabbar/appLogin",
								fail(error) {
									console.log(error);
								},
							});
						}, 1000);
					}, 2000);
				}


				if (!this.isAgree) {
					return uni.showToast({
						icon: 'none',
						title: '请先阅读并勾选充值协议'
					})
				}

				console.log('------goApplePay', this.productId);
				this.show = true
			},
			// 选择卡片
			selectCard(id) {
				this.productId = id
				this.requestIapOrder();
			},
			// 选择支付方式
			determine(v) {
				if (!v) {
					return uni.showToast({
						icon: 'none',
						title: '请选择支付方式'
					})
				}
				console.log(v, '选择支付方式');
				if (v.id == 0) {
					this.iphonePay()
					this.show = false
				} else if (v.id == 1) {
					this.vxPay()
					this.show = false
				} else if (v.id == 2) {
					this.zfbPay()
					this.show = false
				}
			},


			// 苹果支付
			iphonePay() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				// 获取订单
				let _this = this;
				plus.payment.request(this.iap, {
					productid: this.productId,
					username: '充值',
				}, function(result) {
					console.log("支付成功", result);
					console.log('this.productId', _this.productId);
					const card = _this.cardList.find(v => v.productId == _this.productId)
					_this.$api.appleCallback({
						productId: card.id
					}).then(res => {
						console.log('苹果支付回调', res);
					})
					uni.hideLoading();
				}, function(e) {
					console.log(e, '支付失败');
					uni.hideLoading();
				});
			},

			// 微信支付
			vxPay() {
				const card = this.cardList.find(v => v.productId == this.productId)
				this.$api.wechatSubmit({
					cardId: card.id
				}).then(res => {

					console.log('支付数据', res.data);
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					console.log('this.wxpaySev', this.wxpaySev);
					//发起支付
					plus.payment.request(this.wxpaySev, res.data, (result) => {
						console.log("支付成功", JSON.stringify(result));
						uni.showToast({
							icon: 'success',
							title: '支付成功'
						})
						uni.hideLoading();
					}, function(e) {
						console.log("支付失败：" + JSON.stringify(e));
						uni.hideLoading();
					});
				})
			},

			zfbPay() {

				const card = this.cardList.find(v => v.productId == this.productId)
				this.$api.alipaySubmit({
					cardId: card.id
				}).then(res => {
					console.log('支付宝支付数据', res.data);
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					//发起支付
					plus.payment.request(this.alipaySev, res.data.body, (result) => {
						console.log("支付成功");
						uni.showToast({
							icon: 'success',
							title: '支付成功'
						})
						uni.hideLoading();
					}, function(e) {
						console.log("支付失败：" + JSON.stringify(e));
						uni.hideLoading();
					});
				})

			},

			getCardList() {
				this.$api.getCardList().then(res => {
					console.log('次卡列表', res.data, "次卡列表")
					this.cardList = res.data
					this.productId = res.data[0].productId
					this.getIapChannels()
				})
			},
			getUserInfo() {

				if (!this.vuex_token) return
				this.$api.getUserInfo().then(res => {
					console.log(res, '用户信息')
					this.userInfo = res.data
				})

				// this.userInfo = uni.getStorageSync('userInfo')

			},


			topUp() {
				this.$api.startPay().then(res => {
					console.log(res, '是否支付');
					if (res.msg == "false") {
						uni.navigateTo({
							url: '/pages/my/pages/service'
						})
					} else {
						this.show = true
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {}

	.head {
		width: 750rpx;
		height: calc(env(safe-area-inset-top) + 320rpx);
	}

	.bg {
		width: 750rpx;
		height: calc(env(safe-area-inset-top) + 320rpx);
		background: linear-gradient(315deg, #D9FFF0 0%, #DFFFD9 100%);
		position: relative;

		.bg_b {
			position: absolute;
			bottom: 0;
			width: 750rpx;
			height: 160rpx;
			background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			z-index: 1;
		}

		.userCard {
			width: 686rpx;
			height: 168rpx;
			background: linear-gradient(149deg, #000000 0%, #4D4D4D 100%);
			border-radius: 16rpx;
			padding: 24rpx 0 24rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			z-index: 3;
			top: calc(env(safe-area-inset-top) + 120rpx);
			left: 50%;
			transform: translateX(-50%);

			.user_l {
				display: flex;
				align-items: center;
				gap: 24rpx;

				.header-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}

				.info {
					height: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 20rpx;

					.name {
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.mycard {
						font-size: 24rpx;
						color: #FFFFFF;
						display: flex;
						align-items: flex-end;
						gap: 10rpx;
					}

				}

			}

			.user_r {
				width: 128rpx;
				height: 48rpx;
				background: linear-gradient(90deg, #01FFCC 0%, rgba(1, 255, 204, 0.4) 100%);
				border-radius: 30rpx 0rpx 0rpx 30rpx;
				font-size: 24rpx;
				color: #1A1A1A;
				line-height: 48rpx;
				text-align: center;
			}
		}
	}

	.main {
		padding: 0 32rpx;
		box-sizing: border-box;

		.main_t {
			display: flex;
			align-items: center;
			gap: 12rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #1A1A1A;

			.card_icon {
				width: 32rpx;
				height: 27rpx;
			}

		}

		.list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.list_item {
				width: 334rpx;
				height: 128rpx;
				background: #F7F8FA;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.list_i_l {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.card_name {
						font-size: 28rpx;
						color: #333333;
					}

					// .card_num {
					// 	font-size: 24rpx;
					// }

					.price {
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
					}
				}

				.list_i_r {
					font-weight: bold;
					font-size: 28rpx;
					color: #1A1A1A;
					display: flex;
					flex-direction: column;
					align-items: center;


					.original {
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
						text-decoration: line-through;
					}
				}

			}

			.list_item_a {
				background-color: #000000;

				.list_i_l {
					.card_name {
						color: #FFFFFF;
						font-weight: bold;
					}

					.price {
						color: #FFFFFF;
					}
				}

				.list_i_r {
					color: #01FFCC;
				}
			}
		}

		.agreement {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin: 40rpx 0;

			.gou {
				width: 24rpx;
				height: 24rpx;
			}

			.no_select {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				border: 1rpx solid #1A1A1A;
			}

			.a_name {
				color: #1A1A1A;
			}
		}

		.top_up {
			width: 686rpx;
			height: 96rpx;
			background: #1A1A1A;
			border-radius: 16rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}
	}
</style>